tabindex

<p>Click anywhere in this pane, then try tabbing through the elements.</p>

<label>First in tab order:<input type="text" /></label>

<div tabindex="0">Tabbable due to tabindex.</div>

<div>Not tabbable: no tabindex.</div>

<label>Third in tab order:<input type="text" /></label>

p {
  font-style: italic;
  font-weight: bold;
}

div,
label {
  display: block;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

div:focus {
  font-weight: bold;
}

Es akzeptiert einen ganzzahligen Wert, mit unterschiedlichen Ergebnissen, abhängig vom Wert der Zahl:

• Ein negativer Wert (der genaue negative Wert spielt tatsächlich keine Rolle, normalerweise tabindex="-1") bedeutet, dass das Element nicht über die sequentielle Tastaturnavigation erreichbar ist.

  Hinweis: tabindex="-1" kann nützlich für Elemente sein, die nicht direkt über die Tab-Taste angesteuert werden sollen, aber dennoch die Tastaturfokussierung auf sie gesetzt werden muss. Beispiele sind ein außerhalb des Bildschirms liegendes modales Fenster, das fokussiert werden soll, wenn es sichtbar wird, oder eine Formularfehlermeldung, die sofort fokussiert werden soll, wenn ein fehlerhaftes Formular übermittelt wird.

• tabindex="0" bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein soll, nach allen positiven tabindex-Werten. Die Fokussierungsreihenfolge dieser Elemente richtet sich nach ihrer Reihenfolge im Dokumentenquelltext.

• Ein positiver Wert bedeutet, dass das Element in der sequentiellen Tastaturnavigation fokussierbar sein soll, wobei seine Reihenfolge durch den Wert der Zahl definiert ist. Das heißt, tabindex="4" wird vor tabindex="5" und tabindex="0" fokussiert, aber nach tabindex="3". Wenn mehrere Elemente denselben positiven tabindex-Wert teilen, folgt ihre relative Reihenfolge zueinander ihrer Position im Dokumentenquelltext. Der maximale Wert für tabindex ist 32767.

• Wenn das tabindex-Attribut ohne gesetzten Wert enthalten ist, wird durch den Benutzeragenten bestimmt, ob das Element fokussierbar ist.

  Warnung: Es wird empfohlen, ausschließlich 0 und -1 als tabindex-Werte zu verwenden. Vermeiden Sie tabindex-Werte größer als 0 und CSS-Eigenschaften, die die Reihenfolge fokussierbarer HTML-Elemente ändern können (Reihenfolge von Flex-Elementen). Dies erschwert es Menschen, die auf die Tastaturnavigation oder assistive Technologien angewiesen sind, die Seiteninhalte zu navigieren und zu bedienen. Stattdessen sollten Sie das Dokument in einer logischen Reihenfolge verfassen.

Einige fokussierbare HTML-Elemente haben standardmäßig einen tabindex-Wert von 0, der durch den Benutzeragenten gesetzt wird. Zu diesen Elementen gehören ein <a> oder <area> mit href-Attribut, <button>, <frame> Veraltet , <iframe>, <input>, <object>, <select>, <textarea>, und SVG <a>-Elemente oder ein <summary>-Element, das eine Zusammenfassung für ein <details>-Element bereitstellt. Entwickler sollten das tabindex-Attribut nicht zu diesen Elementen hinzufügen, es sei denn, es ändert das Standardverhalten (zum Beispiel, indem ein negativer Wert hinzugefügt wird, wird das Element aus der Fokussierungsreihenfolge entfernt).

Vermeiden Sie die Verwendung des tabindex-Attributs in Verbindung mit nicht-interaktiven Inhalten, um etwas, das interaktiv sein soll, per Tastatureingabe fokussierbar zu machen. Ein Beispiel hierfür wäre die Verwendung eines <div>-Elements zur Beschreibung eines Buttons anstelle des <button>-Elements.

Interaktive Komponenten, die mithilfe nicht-interaktiver Elemente erstellt werden, sind nicht im Barrierefreiheitsbaum gelistet. Das verhindert, dass assistive Technologien diese Komponenten navigieren und manipulieren können. Die Inhalte sollten semantisch mithilfe interaktiver Elemente (<a>, <button>, <details>, <input>, <select>, <textarea>, usw.) beschrieben werden. Diese Elemente haben eine eingebaute Rolle und Zustände, die den Status für die Barrierefreiheit kommunizieren, die anderweitig von ARIA verwaltet werden müssten.

• Verwendung des tabindex-Attributs | The Paciello Group

• Alle globalen Attribute
• HTMLElement.tabIndex, das dieses Attribut widerspiegelt
• Barrierefreiheitsprobleme mit tabindex: siehe Don't Use Tabindex Greater than 0 von Adrian Roselli
• Lesereihenfolge